import React from "react"


// 组件通讯
// 1.父传子
//  vue/react: 父组件调用子组件的时候，给子组件添加属性，
// 通过属性把值传给子组件，在子组件内容再用props接受属性传过来的值
// react中：父组件传给子组件的值，可以是任意数据类型


// 2.子传父
// vue:父组件调用子组件的时候，给子组件添加属性，把父组件中定义的事件传给子组件
// 在子组件中通过$emit触发父组件的自定义事件，来传值给父组件

// react:
// 1.在父组件中自定义方法，用于接受子组件传过来的值
// 2.在父组件中使用子组件的时候，把自定义方法通过属性传值的方法传给子组件
// 3.在子组件中通过props获取到传给子组件的自定义方法，并且调用
// 4.在子组件中调用该方法的时候，把要传给父组件的值作为参数，传入到该方法中


// 3.兄弟之间
// vue:状态管理（vueX、pinia）

// react:状态提升，把兄弟组件之间共享的状态数据和方法提升到最近的公共父组件中，由公共父组件进行管理


// 4.祖先和后代组件之间的通信:context



class Father extends React.Component{
    state={
        fatherMsg:"父组件的内容",
        arr:[1,2,3,4],
        childMsg:""
    }
    // 父组件自定义方法：用于获取子组件传过来的值
    getChildData=(data)=>{
        // data:形参，子组件传过来的值
        console.log("子组件传过来的值：",data);
        this.setState({
            childMsg:data
        })

    }

    render(){
        return <div>
            <h1>父组件标题</h1>
            <p>子组件传过来的值：{this.state.childMsg}</p>
            <Child userName="张三" userAge={19} 
            getData={this.getChildData}
            >

            </Child>
            <Child2 userName="李四" userAge="39"></Child2>
        </div>
    }
}

// 使用类创建组件:在组件中有this.props属性获取父组件传过来的值
class Child extends React.Component{
    constructor(props){
        super(props)
        this.state={
            ChildMsg:"哈哈哈"
        }
    }
    // 子组件内部的点击事件的事件处理函数
    toFaterData=()=>{
        console.log("props:",this.props);
        this.props.getData(this.state.ChildMsg);

    }
    render(){
        return <div>
            <h2>子组件的内容</h2>
            <p>父组件传过来的内容：{this.props.userName}---{this.props.userAge}</p>
            <button onClick={this.toFaterData}>点击按钮，子组件把值传给父组件</button>
            
        </div>
    }
}
// 使用函数创建的组件：在组件中需要定义一个props形参，用来接受父组件传过来的值
function Child2(props){
    console.log("props22222",props)
    return (
        <div>
            <h2>子组件2的内容</h2>
            <p>父组件传过来的内容：{props.userName}---{props.userAge}</p>
            
        </div>
    )  
}

// 公共父组件
class Max extends React.Component{
    state={
        count:0
    }
    add=()=>{
        this.setState({
            count:this.state.count+1
        })
    }
    sub=()=>{
        this.setState({
            count:this.state.count-1
        })
    }
    render(){
        return <div>
            <BroA count={this.state.count}></BroA>
            <BroB add={this.add} sub={this.sub}></BroB>
        </div>
    }
}

// 兄弟组件A
class BroA extends React.Component{
    render(){
        return <h1>计数器：{this.props.count}</h1>
    }
}

// 兄弟组件B
class BroB extends React.Component{
    render(){
        return <div>
            <button onClick={()=>this.props.add()}>+1</button>
            <button onClick={()=>this.props.sub()}>-1</button>
        </div>
    }
}

// context:可以把祖先组件的直接传给后代组件
let {Provider,Consumer}= React.createContext()
// Provider:组件，用于提供数据
// Consumer：组件，用于消费数据
class Com1 extends React.Component{
    render(){
        return <div>
            {/* 提供数据 */}
            <Provider value={"red"}>
               <h1>Com1</h1>
               <Com2></Com2>
            </Provider>
        </div>
    }
}
class Com2 extends React.Component{
    render(){
        return <div>
            <h2>Com2</h2>
            <Com3></Com3>
        </div>
    }
}

class Com3 extends React.Component{
    render(){
        return <div>
            <h3>Com3</h3>
            <Com4></Com4>
        </div>
    }
}
class Com4 extends React.Component{
    render(){
        return <div>
            <Consumer>
                {data=><h4>Com4-------{data}</h4>}
            </Consumer>
            
        </div>
    }
}





class Connection extends React.Component{
    render(){
        return <div>
            {/* <Father></Father> */}
            {/* <Max></Max> */}
            <Com1></Com1>
        </div>
    }
}
export default Connection